<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style type="text/css">
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
body{ font-size:16px;}
.display_pro, .hide_pro{ float:none;  overflow:hidden}

.title_pro{height:40px; line-height:40px; font-size:18px;  overflow:visible;}
span.title_pro_sp{width:300px;display:block; text-align:center; /*padding:2px 80px;*/ overflow:hidden; color:#FFF; background-color:#428bca; cursor:pointer; 
						border-radius: 4px; border:2px solid #eee;text-shadow: 0px 1px #999;}

.pro_row { border-radius: 5px 5px; background-color:#fff; overflow:auto; float:left; margin-right:15px; margin-bottom:15px; z-index: 10000}
.pro_info{ float:none; overflow:auto}
.pro_name, .pro_del { padding:8px 15px; display:block; float:left; cursor:pointer;}
.pro_name { border-radius: 5px 0px 0px 5px; background-color:#F7F7F7; letter-spacing:1px;}
.pro_del { padding-left:8px; padding-right:8px; border-radius:0px 5px 5px 0px; background:#ECECFF; font-weight:bold;}
span.text_shadow_1_ { text-shadow: 0px -1px #bbb, 0 1px #fff;color:#e3e1e1; }
.pro_explain { width:120px; border-radius:5px; line-height:20px; float:none; background-color:#FFFFC8; padding:5px;
		 position:absolute; display:none; color:#333;  letter-spacing:2px; border:1px #fff solid; border-top:none; font-size: 12px;}
.margin_top_1{ margin-top:20px;}

</style>
</head>

<body>
<div style=" ">
  <div class="display_pro" id="displayPro">
    <div class=" title_pro"><span class="title_pro_sp" title="包含您在添加文章时可以选择的属性" >属性</span></div>
    <div style=" height:20px;"></div>
    
    <c:forEach items="${propertys }" var="pro">
    	<c:if test="${pro.isValid}" >
    	
	    <div class="pro_row"  id="row${pro.id }">
	      <div class="pro_info">
	      	<span class="pro_name" onclick="switchDisplay('proExplain${pro.id }')" onselectstart="return false;" title="点击查看属性说明">${pro.name }</span>
	        <span class="pro_del text_shadow_1" title="删除" onclick="delPro('${pro.id }', 'row${pro.id }', this)"
	        	style=" color: red;">×</span>
	      </div>
	      <div class="pro_explain"  id="proExplain${pro.id }">
		    <c:out value="${pro.explain }" escapeXml="false" ><span style=' color:red;'>暂时没有说明</span></c:out>
		  </div>
	    </div>
		    
		</c:if>
	</c:forEach>
	
  </div>
  
  <div style=" height:40px;"></div>
  <!-- 隐藏的属性，控制条 -->
  <div style=" height:35px; float:right; line-height:35px; margin-top:10px; position:relative;" onselectstart="return false;">
  	<div style="float:right;  padding-right:10px; font-weight:bold; cursor:pointer;
  					text-shadow: 0px -1px #bbb, 0 1px #fff;">
    	<font size="5" color="red"><span onclick="switchHidePro()" id="onOff" title="显示回收站">∨</span></font>
    </div>
  </div>
  <!-- 隐藏的属性 -->
  <div class="hide_pro" id="hidePro" style=" display: none;">
  	<div class=" title_pro"><span class="title_pro_sp" title="包含您已经删除的属性">回收站</span></div>
    <div style=" height:20px;"></div>
    
    <c:forEach items="${propertys }" var="pro">
    	<c:if test="${!pro.isValid}">
    	
	    <div class="pro_row" id="row${pro.id }">
	      <div class="pro_info">
	      	<span class="pro_name"  onclick="switchDisplay('proExplain${pro.id }')"  onselectstart="return false;"  title="点击查看属性说明">${pro.name }</span>
	        <span class="pro_del text_shadow_1" title="还原" onclick="addPro('${pro.id }','row${pro.id }', this)"
	        	style=" color:green;">+</span>
	      </div>
	      <div class="pro_explain"  id="proExplain${pro.id }">
	   		<c:out value="${pro.explain }" escapeXml="false" ><span style=' color:red; '>暂时没有说明</span></c:out> 
	      </div>
	    </div>
	    
    	</c:if>
	</c:forEach>
  </div>
  
  <!-- 新增属性 -->
  <div class=" title_pro margin_top_1" ><span class="title_pro_sp"  title="添加新的属性，以便您在新增文章时可以选择属性">添加属性</span></div>
  <div style=" width:100%; margin-top:20px;">
  	<form name="add_form" id="addForm" action="#">
     	<div class="col-sm-6 input-group" style=" float: none;">
     		<span class="input-group-addon" style=" width: 70px;">属性名:</span>
     		<input type="text" class="form-control" name="name" style="width:210px; height:34px;" id="proName" />
     	</div>
     	<div class="col-sm-6 input-group"  style=" float: none; margin-top: 10px;">
     		<span class="input-group-addon" style=" width: 70px;">说明:</span>
     		<textarea class="form-control" rows="4" cols="2" name="explain"  style="width:210px;" id="proExplain" ></textarea>
     	</div>
     	<div class="col-sm-6 input-group"  style=" float: none;  margin-top: 10px;">
     		<button type="button" class="btn btn-info" onclick="return addNewPro();">确定</button>
     	</div>
     	
  	</form>
  </div>
</div>
<div style=" height: 40px; margin-top: 40px; "></div>
<script type="text/javascript">
//还原属性
function addPro(proId, rowId, button) {
	var row = $("#" + rowId);
	
	//利用ajax更改数据
	$.ajax({ url: "<%=basePath%>backend/article/addpro?id="+proId,
		beforeSend:function() {
			
		},
		success: function(date){
			if (date == "success") {
				promptWindow("添加成功!");
				
				row.animate({opacity:"0"},200);
				window.setTimeout(function(){
					var oldMargin = row.css("margin");
					
					row.height(row.height());
					row.animate({width:"0", height:"0", margin:"0"},200);
					
					setTimeout(function(){
						//改变按钮功能
						button.innerText = "×";
						button.setAttribute("title", "删除");
						button.setAttribute("onClick", "delPro('"+proId+"','"+rowId+"',this)");
						button.style.color = "red";
						
						row.remove();
						row.css("margin", oldMargin);
						row.css("width", "");
						row.css("height", "");
						row.appendTo($("#displayPro"));
						row.animate({opacity:"1"}, 100);
					}, 300);
					
				}, 400);

			} else {
				promptWindow("添加失败,请稍后再试！");
			}
    	},
    	complete: function(){
    		
    	},
    	error:function(){
    		promptWindow("网络繁忙，请稍后再试！");
    	}
	});
	
	
}
//删除属性
function delPro(proId, rowId, button) {	
	var row = $("#" + rowId);
	
	//利用ajax更改数据
	$.ajax({ url: "<%=basePath%>backend/article/delproperty?id="+proId,
		beforeSend:function() {
			
		},
		success: function(date){
			if (date == "success") {
				promptWindow("删除成功!");
				
				row.animate({opacity:"0"},200);
				window.setTimeout(function(){
					var oldMargin = row.css("margin");
					
					row.height(row.height());
					row.animate({width:"0", height:"0", margin:"0"},200);
					
					setTimeout(function(){
						//改变按钮功能
						button.innerText = "+";
						button.setAttribute("title", "还原");
						button.setAttribute("onClick", "addPro('"+proId+"','"+rowId+"',this)");
						button.style.color = "green";
						
						row.remove();
						row.css("margin", oldMargin);
						row.css("width", "");
						row.css("height", "");
						row.appendTo($("#hidePro"));
						row.animate({opacity:"1"}, 100);
						
					}, 300);
					
				}, 400);
				
			} else {
				promptWindow("删除失败,请稍后再试！");
			}
    	},
    	complete: function(){
    		
    	},
    	error:function(){
    		promptWindow("网络繁忙,请稍后再试！");
    	}
	});

}

function switchDisplay(id, state) {
	var elem = document.getElementById(id);
	if (state == "none") {
		elem.style.display = "none";
		return;
	} else if (state == "block") {
		elem.style.display = "block";
		return;
	} 

	if (elem.style.display == "block") {
		elem.style.display = "none";
	} else {
		elem.style.display = "block";
	}
}

function switchHidePro() {
	var elem = $("#hidePro");
	var onOff = $("#onOff");
	var finalH = elem.height();
	if (elem.height < 2 || elem.css("display") == "none") {
		elem.css("height", "0");
		elem.css("display", "block");
		elem.animate({height:finalH}, 800);
		setTimeout(function(){
			elem.css("height", "");
		}, 830);
		onOff.html("∧");
		onOff.attr("title", "隐藏回收站");
	} else {
		elem.animate({height:"0"}, 800);
		setTimeout(function(){
			elem.css("display", "none");
			elem.css("height", "");
		}, 830);

		onOff.html("∨");
		onOff.attr("title", "显示回收站");
	}
}

</script>
<script type="text/javascript">
function addNewPro() {
	var inputName = $("form[name=add_form]").find("input[name=name]");
	if (inputName.val().trim() == "") {
		promptWindow("属性名不能为空！");
		inputName.focus();
		return false;
	}
	
	if (checkSameName(inputName.val())) {
		if (!confirm("已经存在相同名称的属性在属性列中，如果是在回收站中，您可以选择还原属性。相同名称的属性容易造成混淆，是否继续添加？")) {
			return false;
		}
	}
	
	$.ajax({ url: "<%=basePath%>backend/article/addnewproperty?"+$('#addForm').serialize(),
		beforeSend:function() {
			
		},
		success: function(date){
			var dateObj = eval("("+date+")");
			
			if (dateObj.status == "success") {
				promptWindow("添加成功!");

				var proRowDiv = $('<div class="pro_row" id="row'+dateObj.id+'">'+
					     '<div class="pro_info">'+
					     	'<span class="pro_name"  onclick="switchDisplay(\'proExplain'+dateObj.id+'\')"  onselectstart="return false;"  title="点击查看属性说明">'+$("form[name=add_form]").find("input[name=name]").val()+'</span>'+
					       '<span class="pro_del text_shadow_1" title="删除" onclick="delPro(\''+dateObj.id+'\',\'row'+dateObj.id+'\', this)"'+
					       	'style=" color:red;">×</span>'+
					     '</div>'+
					     '<div class="pro_explain"  id="proExplain'+dateObj.id+'">'+$("form[name=add_form]").find("textarea[name=explain]").val()+'</div>'+
					   '</div>');
				
				proRowDiv.animate({opacity:"0"},0);
				proRowDiv.appendTo($("#displayPro"));
				proRowDiv.animate({opacity:"1"},200);
				inputName.val("");
				$("form[name=add_form]").find("textarea[name=explain]").val("");
			} else {
				promptWindow("添加失败,请稍后再试！");
			}
    	},
    	complete: function(){
    		
    	},
    	error:function(){
    		promptWindow("网络繁忙，请稍后再试！");
    	}
	});
}

//检查是否存在相同名称的属性
function checkSameName(name) {
	var boo = false;
	$(".pro_name").each(function(){
		if (boo == false) {
			if (name == $(this).text().trim()) {
				boo = true;
			}
		}
	});
	
	return boo;
}
</script>
</body>